<template>
  <div id="commoditymanager" >
    <el-row type="flex" align="middle"  justify="center" class="row-bg" style="height: 70px;margin-right: 48%">
      <el-form :model="check" :inline="true"  ref="check" status-icon class="demo-form-inline" label-position="left" size="small">
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="check.goodName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品编码" prop="goodCode">
          <el-input v-model="check.goodCode" placeholder="请输入产地"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryGood">查询</el-button>
          <el-button type="primary" @click="doReset('check')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="pageGoodData.list"
              height="80vh"
              border
              stripe="true"
              :header-cell-style="{'text-align':'center'}"
              style="width: 100%">
            <el-table-column
                prop="goodCode"
                label="商品编号"
                width="120">
            </el-table-column>
            <el-table-column
                label="商品主图"
                width="120">
              <template slot-scope="scope">
                <el-avatar shape="square" :size="100" fit="fill" :src="scope.row.goodImg"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
                prop="goodName"
                label="商品名称"
                width="150">
            </el-table-column>
            <el-table-column
                prop="typeName"
                label="商品类型"
                width="100">
            </el-table-column>
            <el-table-column
                label="创建时间"
                width="200">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="上架状态"
                width="200">
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.shelfStatus"
                    disabled
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="已上架"
                    inactive-text="未上架"
                    :inactive-value="0"
                    :active-value="1">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="150">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="查看评论 " placement="top-start">
                  <el-button type="info" round @click="catComment(scope.row)" >查看评论</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-drawer
        title="查看评论"
        :visible.sync="commentsVisible"
        direction="btt"
        :modal="false"
        size="80%">
<!--    <el-dialog title="商品评论" :visible.sync="commentsVisible" width="90%">-->
      <el-row type="flex" align="middle"  justify="start" class="row-bg" style="height: 70px;margin-left:30px ">
        <el-form :model="comment" :inline="true"  ref="comment" status-icon class="demo-form-inline" label-position="left" size="small">
          <el-form-item label="用户名称" prop="customerName">
            <el-input v-model="comment.customerName" placeholder="用户名称" style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item label="关键词" prop="cName">
            <el-input v-model="comment.cName" placeholder="关键字" style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryComments">查询</el-button>
            <el-button type="primary" @click="doCommentReset('comment')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :data="comment.commentData">
        <el-table-column
            label="序号"
            width="100">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column property="customerName" label="用户名称" width="150"></el-table-column>
        <el-table-column property="comments" label="评论内容" width="250"></el-table-column>
        <el-table-column property="commentsTime" label="评论时间" width="180"></el-table-column>
        <el-table-column label="是否推荐" width="180px">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.isTop"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="推荐"
                inactive-text="不推荐"
                @change="changeTop(scope.row.id)"
                :inactive-value="0"
                :active-value="1">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否隐藏" width="180px">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.isVisiable"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="显示"
                inactive-text="隐藏"
                @change="changeVisiable(scope.row.id)"
                :inactive-value=0
                :active-value=1>
            </el-switch>
          </template>

        </el-table-column>
      </el-table>
<!--    </el-dialog>-->
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "comments",
  data(){
    return{
      jwt:'',
      //分页相关
      pageGoodData:{
        list:''
      },
      //查询相关
      check:{
        goodName:'',
        goodCode:''
      },
      goodCode:'',
      formLabelWidth: '120px',
      commentsVisible:false,
      comment:{
        customerName:'',
        cName:'',
        commentData:''
      },

    }
  },
  methods:{
    queryGood(){
      let jwt=localStorage.getItem("jwt");
      var url = '/api/goods/goodslist?goodName=' + this.check.goodName + '&goodCode=' + this.check.goodCode;
      this.$axios.get(url,{headers:{"jwt":jwt}})
          .then(response =>{
            if(response.data.code==200){
              this.pageGoodData.list=response.data.data.list;
              // console.log(this.pageGoodData.list);
            }else if(response.data.data==406) {
              this.$message.warning(response.data.msg);
              this.$router.push("/login")
            }else{
                this.pageGoodData.list=null;
                this.$message.warning(response.data.msg);
              }
          });
    },
    doReset(check){
      this.$refs[check].resetFields();
      this.queryGood();
    },
    catComment(rowData){
      this.goodCode = JSON.parse(JSON.stringify(rowData)).goodCode;
      this.queryComments();
      this.commentsVisible=true;
    },
    queryComments(){
      let jwt=localStorage.getItem("jwt");
      var url='/api/comments/commentsList?goodCode='+this.goodCode+'&customerName='+this.comment.customerName+'&keywords='+this.comment.cName;
      this.$axios.get(url,{headers:{"jwt":jwt}})
          .then(response =>{
            console.log(response.data)
            if(response.data.code==200){
              this.comment.commentData=response.data.data;
            }else if(response.data.code==406) {
              this.$router.push("/login");
            }else {
                this.comment.commentData=null;
                this.$message.warning("该商品没有评论信息");
            }
          });
    },
    doCommentReset(check){
      this.$refs[check].resetFields();
      this.queryComments();
    },
    changeVisiable(id){
      let jwt=localStorage.getItem("jwt");
      var url='/api/comments/changeVisiable?id='+id;
      this.$axios
          .get(url,{headers:{'jwt':jwt}})
          .then(response =>{
            if(response.data.code==200){
              this.$message.success(response.data.msg);
              this.queryComments();
            }else if(response.data.data==406) {
              this.$message.warning(response.data.msg);
              this.$router.push("/login")
            }else {
              this.$message.error(response.data.msg);
            }
          })
    },
    changeTop(id){
      let jwt=localStorage.getItem("jwt");
      var url='/api/comments/changeTop?id='+id;
      this.$axios
          .get(url,{headers:{'jwt':jwt}})
          .then(response =>{
            if(response.data.code==200){
              this.$message.success(response.data.msg);
              this.queryComments();
            }else if(response.data.data==406) {
              this.$message.warning(response.data.msg);
              this.$router.push("/login")
            }else {
              this.$message.error(response.data.msg);
            }
          })
    }
  },
  created:function () {
    this.queryGood();
  }
}
</script>

<style scoped>
</style>